<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="HandheldFriendly" content="true">
		<title>滚动条样式</title>
		<link rel="stylesheet" type="text/css" href="../../css/comment.css" />
		<style type="text/css">
			.st-box {
				height: 300px;
				width: 50%;
				margin: 30px auto;
				background: #fff;
				padding: 30px;
				overflow-y: scroll;
			}
			/**/
			
			.st-box::-webkit-scrollbar {/*滚动条整体样式*/
				
				width: 5px;/*高宽分别对应横竖滚动条的尺寸*/
				height: 1px;
				
			}
			
			.st-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
				
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background:red;
			}
			
			.st-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				border-radius: 10px;
				background: #F1F1F1;
			}
			/**/
			
			.st-box li {
				line-height: 50px;
			}
		</style>
	</head>

	<body>

		<div class="st-box">
			<ul>
				<li>第一条</li>
				<li>第二条</li>
				<li>第三条</li>
				<li>第四条</li>
				<li>第五条</li>
				<li>第六条</li>
				<li>第七条</li>
				<li>第八条</li>
				<li>第九条</li>
			</ul>
		</div>

	</body>

</html>